import geoJson from './data/china.json'
import * as echarts from 'echarts'
echarts.registerMap('china', geoJson)

// 获取坐标点
var geoCoordMap = {}
var mapFeatures = echarts.getMap('china').geoJson.features
mapFeatures.forEach(function(v) {
  var name = v.properties.name
  geoCoordMap[name] = v.properties.center
})

export function map1(renderData) {
  renderData = renderData[0].data
  let max = 0

  // 点数据
  const coordData = renderData.map(item => {
    if (item.value > max) {
      max = item.value
    }
    const coord = geoCoordMap[item.name] || []
    return {
      value: [coord[0], coord[1], item.value],
      name: item.name
    }
  })

  return {
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        return params.name + ' : ' + (params.data?.value || 0) + '人'
      }
    },
    // visualMap: {
    //   show: false,
    //   min: 0,
    //   max: max,
    //   left: 'left',
    //   top: 'bottom',
    //   calculable: false
    // },
    geo: {
      map: 'china',
      show: true,
      roam: false,
      zoom: 1.5, // 默认显示级别
      top: '25%',
      scaleLimit: { min: 1.5, max: 3 }, // 缩放级别
      itemStyle: {
        areaColor: 'rgb(15,124,241)',
        borderColor: '#FFFFFF'
      },
      emphasis: {
        itemStyle: {
          areaColor: 'rgb(37,186,139)',
          borderColor: '#fff'
        }
      }

    },
    series: [
      {
        type: 'map',
        map: 'china',
        geoIndex: 0,
        animation: false,
        data: renderData,
        itemStyle: {
          areaColor: 'rgb(15,124,241)',
          borderColor: '#FFFFFF'
        },
        emphasis: {
          itemStyle: {
            areaColor: 'rgb(37,186,139)',
            borderColor: '#fff'
          }
        }
      },
      {
        name: '',
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        symbolSize: [50, 50],
        label: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 12
          },
          formatter(value) {
            return value.data.value[2]
          }
        },
        itemStyle: {
          color: 'rgb(128,216,208)' // 标志颜色
        },
        data: coordData,
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        zlevel: 1
      }
    ]
  }
}
